<template>
  <div class="login-container">
    <a-form
      id="components-form-demo-normal-login"
      :form="form"
      class="login-form"
      @submit="handleSubmit"
    >
      <div class="logo">
        <img :src="imgScr" alt="" />
        <span>智慧社区管理系统</span>
      </div>
      <a-form-item>
        <a-input
          v-decorator="[
            'username',
            {
              rules: [
                { required: true, message: 'Please input your username!' }
              ]
            }
          ]"
          placeholder="用户名"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
            'password',
            {
              rules: [
                { required: true, message: 'Please input your Password!' }
              ]
            }
          ]"
          type="password"
          placeholder="密码"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button
          :disabled="showSpin"
          type="primary"
          html-type="submit"
          class="login-form-button"
          id="TencentCaptchaBtn"
        >
          <a-spin v-if="showSpin" />
          <span v-else>登录</span>
        </a-button>
      </a-form-item>
    </a-form>
  </div>
 
</template>

<script>
// import { setTimeout } from 'timers'

export default {
  data() {
    return {
      showSpin: false,
      imgScr: require("../../static/favicon.png")
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  mounted() {
    // let parma = { username: "ADMIN", password: "123456" };
    // let that = this;
    // that.$axios.login(parma).then(res => {
    //   let token = res.data.token;
    //   localStorage.clear("ktoken");
    //   localStorage.setItem("ktoken", token);
    //   this.$router.push("/HomePage");
    // });
  },
  methods: {
    handleSubmit(e) {
      this.$data.showSpin = true;
      e.preventDefault();

      this.form.validateFields((err, values) => {
        if (!err) {
          let that = this;
          var captcha1 = new TencentCaptcha(
            // document.getElementById("TencentCaptchaBtn"),
            "2035692978",
            function(res) {
              /* callback */
              console.log(res);
    console.log(res.randstr);
    console.log(res.ticket);
              if (res.ret == 0) {
                var parma = {
                  randstr: res.randstr,
                  ticket: res.ticket
                };
                that.$axios.describeCaptchaResult(parma).then(res => {
                  if (res.resultCode == "0") {
                    that.$axios.login(values).then(res2 => {
                      console.log(res2);
                      if (res2.resultCode == "0") {
                        let token = res2.data.token;

                        localStorage.clear("ktoken");
                        localStorage.setItem("ktoken", token);
                        setTimeout(() => {
                          that.$router.push("/HomePage");
                        }, 1500);
                      } else {
                        that.$data.showSpin = false;
                        that.$message.error("用户名或密码错误");
                      }
                    });
                  }
                });
              } else {
                this.$data.showSpin = false;
                this.$message.error("腾讯防水墙验证失败");
              }
            }
          );
          captcha1.show(); // 显示验证码
        }
      });
    }
  }
};
</script>
<style scoped>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
  
}
.login-container {
  min-height: 100%;
  width: 100%;
  /* background-color: #2d3a4b; */
   background-image: linear-gradient(to bottom right, rgba(91, 197, 245, 0.596) ,   rgb(158, 153, 187),rgb(151, 202, 172)); 

  position: fixed;
}

form {
  width: 400px;
 
  padding-top: 10% !important;
  margin: auto !important;
}
.logo img {
  position: relative;
  top: -6px;
  left: 7px;
  height: 40px;
  width: auto;
  border-radius: 50%;
}
.logo {
  margin-bottom: 19px;
  margin-left: 30px;
  width: 300px;
  text-align: center;
}
.logo span {
  font-size: 30px;
  font-weight: bold;
  margin-left: 10px;
  font-family: cursive;
  color:  #eee;
}

</style>
